import React from 'react';
import { useState } from 'react'
import type { FC } from 'react';
import { Avatar, Image } from 'antd-mobile'
import userIcon from '../../../public/Icon/user.png'
import messageIcon from '../../../public/Icon/information_black_n.png'
import './index.css'
import Symptom from './symptom'
import Medicine from './medicine'
import { useSearchParams } from 'react-router-dom';
const Index: FC = ({ }) => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [state, setstate] = useState(Number(id) || 1);
  return (
    <div className="conmon-container">
      <div className="conmon-header">
        <div><Avatar
          src={userIcon}
          className="home-user-avatar"
        /></div>
        <div> <Image
          src={messageIcon}
          width={24}
          height={24}
          className="notification-icon"
        /></div>
      </div>
      <div className="conmon-main">
        <div className="conmon-tab-title">
          <div style={{ color: `${state === 1 ? 'rgb(41, 141, 248)' : "#ccc"}` }} onClick={() => setstate(1)}>常见病症</div>
          <div style={{ color: `${state !== 1 ? 'rgb(41, 141, 248)' : "#ccc"}` }} onClick={() => setstate(2)}>常见药品</div>
        </div>
        {
          state === 1 ? <Symptom></Symptom> : <Medicine></Medicine>
        }
      </div>

    </div>
  );
};

export default Index;